<template>
  <item-title title="基本信息" />

  <el-form
    :inline="true"
    label-position="right"
    label-width="150px"
    class="form-detail"
  >

    <el-row
      :gutter="20"
      style="width:100%"
    >
      <el-col :span="24">
        <el-form-item label="产品名称：">
          <span v-if="datas.planInfo">{{ getProductName(datas.planInfo) }}</span>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="产品属性：">
          <span> {{ getLabel('product_attribute', datas.planInfo?.productAttribute) }}</span>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="终端价：">
          <el-link
            :underline="false"
            style="display: flex;align-items: center"
            type="primary"
            @click="priceClick"
          >
            {{ datas.planInfo?.terminalPrice }}元/{{ getLabel('sell_unit', datas.planInfo?.sellUnit) }}
          </el-link>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="规划地区：">
          <span v-if="datas.planDetail.provinceName">{{
            datas.planDetail.provinceName
          }}/{{ datas.planDetail.cityName }}/{{ datas.planDetail.areaName }}/{{ datas.planDetail.streetName }}</span>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="规划开发终端数量：">
          {{ datas.planDetail?.devTerminalNum }} 家
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="其他说明：">
          <span v-if="datas.planDetail?.remark">{{ datas.planDetail?.remark }}</span>
          <span v-else>无</span>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="招商规划名称：">
          {{ datas.planInfo?.planName }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="创建人：">
          {{ datas.planInfo?.creatorName }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="创建时间：">
          {{ dateFormat('yyyy-mm-dd HH:MM', datas.planInfo?.createdAt) }}
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="发布时间：">
          <span v-if="datas.planInfo?.putTime">{{ dateFormat('yyyy-mm-dd HH:MM',datas.planInfo?.putTime) }}</span>
          <span v-else>无</span>
        </el-form-item>
      </el-col>
    </el-row>

  </el-form>

  <detail-drawer
    ref="detailDrawer"
    :size-width="1000"
    custom-title
  >
    <template #title>

      <span>产品终端价 - {{ datas.planInfo.priceNumber }}</span>

    </template>
    <template #contents>

      <terminalPrice :id="datas.planInfo.productPriceId" />

    </template>
  </detail-drawer>

</template>

<script>
import {
  defineAsyncComponent,
  defineComponent,
  getCurrentInstance,
  inject,
  reactive,
  toRefs,
  watch,
} from 'vue'

export default defineComponent({
  name: 'DirectDetail',
  components: {
    terminalPrice: defineAsyncComponent(() =>
      import(
        '../product/terminalPrice.vue'
      )
    ),
  },
  props: {
    id: {
      type: Number,
      default: 0,
    },
  },
  setup(props, {}) {
    const api = inject('api')
    const currentInstance = getCurrentInstance()
    var data = reactive({
      detailDrawer: null,
      datas: {
        planInfo: {},
        planDetail: {},
      },
    })

    const priceClick = () => {
      data.detailDrawer.open()
    }

    const getData = (id) => {
      api.plan.PLAN_DETAIL_DETAIL(id).then((res) => {
        if (!res.code) {
          data.datas = res.data
        } else {
          currentInstance.proxy.customMessage({
            type: 'error',
            message: res.msg,
          })
        }
      })
    }

    watch(
      () => props.id,
      (newval, oldval) => {
        if (newval) {
          getData(newval)
        }
      },
      { immediate: true, deep: true }
    )

    return {
      ...toRefs(data),

      priceClick,
    }
  },
})
</script>

<style scoped>
</style>
